<!--服务详情页-->
<template>
<div class="storeDetail">
  <div class="content">
    <div class="banner">
      <swipe :speed="500" :auto="2000">
        <swipe-item v-for="(item,index) in storeInfo.imageList" :key="index">
          <img style="width: 100%; max-width: 800px" :src="item" alt="" />
        </swipe-item>
      </swipe>
    </div>
  </div>
  <div class="storeInfo" >
    <h2>{{storeInfo.name}} <i></i><span> {{storeInfo.businessHours|subTime}}</span></h2>
    <p>{{storeInfo.address}} </p>
    <div class="site">
      <div @click="to"><i></i> 距您{{storeInfo.distance}}km</div>
      <div><i></i> <a :href="tel">电话预约 </a></div>
    </div>
    <div class="newStore" v-if="isShow">
      <span></span>
      <span>{{new Date(storeInfo.openShopMonth) |fromatDate('yyyy-MM-dd') |subday  }}</span>
    </div>
  </div>
  <div style="width:100%;height: 1px;background-color: #dedede;"></div>
  <div class="serciveList">
    <div class="serciveTitle">
      <span>服务列表</span>
      <span @click="toServer">查看全部</span>
    </div>
    <!--   <img v-lazyload="{shopImg:item.imgSrc,imgType:'service'}" alt=""> -->
    <div class="product">
      <div v-for="(item,index) in skinBeautyList" :key="index">
        <div @click="toDetails(item)">
          <img v-lazyload="{shopImg:item.imgSrc,imgType:'service'}" alt="">
          <p> {{item.name}}</p>
          <p><span>￥{{ item.price}}</span> <s>￥{{item.marketPrice}}</s> </p>
        </div>
      </div>
    </div>
  </div>
  <div class="brand">
    <h4 class="tit">品牌介绍</h4>
    <div class="article" v-for="(item,index) in lightspot" :key="index">
      <div>
        <img :src="item.imgUrl" alt="" />
      </div>
      <h3><span>{{item.titles}} <i></i></span></h3>
      <div class="line"></div>
      <p>
        {{item.describes}}
      </p>
    </div>
  </div>
</div>
</template>

<script>
import { Swipe, SwipeItem } from "vue-swipe";
import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      storeInfo: "",
      skinBeautyList: "",
      lightspot: "",
      location: "",
      currla: "",
      currlo: ""
    };
  },

  components: {
    Swipe,
    SwipeItem
  },
  computed: {
    isShow() {
      var now = new Date();
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var day = now.getDate();
      var time = new Date(`${year}-${month}-${day} 00:00:00`);
      if (time.toString() == "Invalid Date") {
        time = new Date(`${year}/${month}/${day} 00:00:00`);
      }
      var nowTime = time.getTime();
      if (
        this.storeInfo.showTimeStart <= nowTime &&
        this.storeInfo.showTimeEnd >= nowTime &&
        this.storeInfo.newLabel
      ) {
        return true;
      } else {
        return false;
      }
    },
    tel() {
      return "tel:" + this.storeInfo.fax;
    }
  },
  filters: {
    subTime(time) {
      if (!time) {
        return "";
      }
      var time1 = time.split(",")[0];
      var time2 = time.split(",")[1];
      return time1 + "—" + time2;
    },
    subday(val) {
      var time1 = val.split("-");
      return time1[0] + "  -  " + time1[1];
    }
  },
  created() {
    if (!this.fn.getLocation()) {
      // 获取地理位置
      this.location = this.fn.getLatitude();
    }
    this.getShopList();
    this.officelightspot();
    this.findPage();
  },
  mounted() {
    this.share();
  },
  methods: {
    // 去服务列表
    toServer(item, index) {
      this.$store.commit("serviceTabStatus", 0);
      this.$router.push({
        path: "product",
        query: { id: "", index: "", shopType: 0 }
      });
    },
    share() {
      var _this = this;
      this.skipURL = window.location.href;
      var id = this.$route.query.id;
      this._ajax({
        url: this.fn.wyl + "pay/urlShare",
        method: "post",
        data: {
          requestUrl: this.skipURL,
          officeId: id
        },
        callback(db) {
          if (db.errorCode == "200") {
            try {
              let data = db.datas;
              console.log(data, "---");
              wx.config({
                // debug: true,
                appId: db.datas.appid,
                timestamp: db.datas.timestamp,
                nonceStr: db.datas.noncestr,
                signature: db.datas.signature,
                jsApiList: [
                  "checkJsApi",
                  "onMenuShareTimeline",
                  "onMenuShareAppMessage",
                  "onMenuShareQQ",
                  "onMenuShareWeibo",
                  "onMenuShareQZone"
                ]
              });

              //标题：深圳第1分店 - 面子
              // 文案：时光在变青春永驻！全国连锁便利呵护，来面子智能美肤，一起享受高科技全方位护理！
              // 默认图片
              //var img = require("../../assets/image/head.png");

              let title = data.offeceName
                ? data.offeceName + "—面子"
                : "深圳分店" + "—面子";
              let link = _this.skipURL;
              let desc =
                "时光在变青春永驻！全国连锁便利呵护，来面子智能美肤，一起享受高科技全方位护理！";
              let imgUrl = data.officeImage;
              wx.ready(function() {
                // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
                wx.onMenuShareTimeline({
                  title: title, // 分享标题
                  link: link,
                  imgUrl: imgUrl // 分享图标
                });
                // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
                wx.onMenuShareAppMessage({
                  title: title, // 分享标题
                  desc: desc, // 分享描述
                  link: link,
                  imgUrl: imgUrl // 分享图标
                });

                //获取“分享到QQ”按钮点击状态及自定义分享内容接口
                wx.onMenuShareQQ({
                  title: title, // 分享标题
                  desc: desc, // 分享描述
                  link: link, // 分享链接
                  imgUrl: imgUrl, // 分享图标
                  success: function() {
                    // 用户确认分享后执行的回调函数
                  },
                  cancel: function() {
                    // 用户取消分享后执行的回调函数
                  }
                });

                //获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
                wx.onMenuShareWeibo({
                  title: title, // 分享标题
                  desc: desc, // 分享描述
                  link: link, // 分享链接
                  imgUrl: imgUrl, // 分享图标
                  success: function() {
                    // 用户确认分享后执行的回调函数
                  },
                  cancel: function() {
                    // 用户取消分享后执行的回调函数
                  }
                });

                //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
                wx.onMenuShareQZone({
                  title: title, // 分享标题
                  desc: desc, // 分享描述
                  link: link, // 分享链接
                  imgUrl: imgUrl, // 分享图标
                  success: function() {
                    // 用户确认分享后执行的回调函数
                  },
                  cancel: function() {
                    // 用户取消分享后执行的回调函数
                  }
                });

                wx.error(function(res) {
                  // alert(JSON.stringify(res) + "配置错误返回的参数");
                  //window.reload();
                  // alert(JSON.stringify(db.datas)+ "请求的参数");
                  // alert(_this.skipURL,'加密的url');
                  // alert(
                  //   JSON.stringify({
                  //     debug: true,
                  //     appId: db.datas.appid,
                  //     timestamp: db.datas.timestamp,
                  //     nonceStr: db.datas.noncestr,
                  //     signature: db.datas.signature,
                  //     jsApiList: [
                  //       "checkJsApi",
                  //       "onMenuShareTimeline",
                  //       "onMenuShareAppMessage",
                  //       "onMenuShareQQ",
                  //       "onMenuShareWeibo",
                  //       "onMenuShareQZone"
                  //     ]
                  //   })
                  // );
                });
              });
            } catch (err) {
              alert(err + "try 错误");
            }
          } else {
            _this.fn.tip("服务器繁忙");
          }
        }
      });
    },
    // 去百度地图
    to() {
      window.location.href =
        "https://map.baidu.com/mobile/webapp/search/search/qt=s&wd=" +
        this.storeInfo.address +
        "/vt=map&ecom=0";
    },
    //  跳转到服务详情页面
    toDetails(item) {
      this.$router.push({
        path: "storeDetail",
        query: {
          serverId: item.id,
          shopType: 0,
          shopId: this.storeInfo.id
        }
      });
    },
    // 服务列表
    getShopList() {
      var _this = this;
      this._ajax({
        url: this.fn.wyl + "server/recommendList",
        method: "post",
        data: {},
        callback(db) {
          if (db.errorCode == "200") {
            var data = db.datas;
            data.forEach(function(val, index) {
              if (val.images != null) {
                if (val.images.indexOf("|") == -1) {
                  val.imgSrc = val.images;
                } else {
                  val.imgSrc = val.images.split("|")[0];
                }
              } else {
                val.imgSrc = "";
              }
            });
            _this.skinBeautyList = data;
          } else {
            _this.fn.tip("服务器繁忙");
          }
        }
      });
    },
    officelightspot() {
      var _this = this;
      this._ajax({
        url: this.fn.wyl + "officelightspot/getList",
        method: "post",
        data: {},
        callback(db) {
          if (db.errorCode == "200") {
            _this.lightspot = db.datas;
          } else {
            _this.fn.tip("服务器繁忙");
          }
        }
      });
    },
    // 美容院列表
    findPage() {
      var _this = this;
      this.location = this.fn.getLocation();
      if (this.location) {
        this.currla = this.location.currla;
        this.currlo = this.location.currlo;
      }
      var data = {
        name: this.$route.query.sortName, //条件搜索之——美容院名称
        areaId: "", //区域编码
        type: "", //查询条件
        sortName: "distance", //排序名，（soldSum销量desc，默认），（grade级别desc）,(distance距离asc)
        longitude: _this.currlo, //经度
        latitude: _this.currla, //纬度
        curPage: 1, //当前页码
        pageSize: 1, //页面大小
        officeId: this.$route.query.id // 美容院ID
      };

      var _this = this;
      _this._ajax({
        url: _this.fn.xqq + "office/findPage",
        method: "post",
        data: data,
        callback(db) {
          if (db.errorCode == 200) {
            _this.storeInfo = db.datas.officeList[0];
            _this.storeInfo.imageList = _this.storeInfo.officeImage.split("|");
            window.document.title = _this.storeInfo.name;
          } else {
            _this.fn.tip(db.msg);
          }
        }
      });
    }
  }
};
</script>
<style>
.storeDetail .mint-swipe-items-wrap {
  height: inherit;
  overflow: hidden;
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../../assets/css/util.scss";
@import "../../assets/css/vue-swipe.css";
.storeDetail {
  .banner {
    > div {
      height: px2rem(420);
    }
    img {
      height: px2rem(420);
    }
  }
  .storeInfo {
    padding: 0 0.75rem;
    position: relative;
    background-color: #fff;
    .newStore {
      position: absolute;
      display: flex;
      flex-direction: column;
      right: px2rem(45);
      top: px2rem(-20);
      span:nth-of-type(1) {
        display: inline-block;
        @include wh(68, 80);
        background-image: url("../../assets/image/newStore.png");
        background-size: contain;
        border: none;
      }
      span:nth-of-type(2) {
        @include sc(20,
        #08bae3);
      }
    }
    h2 {
      padding-top: px2rem(40);
      text-align: left;
      @include sc(36,
      #333);
      line-height: px2rem(36);
      span {
        @include sc(24,
        #c2c5cc);
        vertical-align: middle;
        font-weight: normal;
      }
      i {
        display: inline-block;
        @include wh(22,
        22);
        background-image: url("../../assets/image/clock.png");
        background-size: contain;
        border: none;
        vertical-align: middle;
        margin-left: px2rem(32);
      }
    }
    p {
      @include sc(24,
      #333);
      padding: px2rem(26) 0;
      padding-bottom: px2rem(0);
      line-height: 0.6rem;
      text-align: left;
    }
    .site {
      padding: px2rem(46) 0;
      // height: px2rem(40);
      display: flex;
      > div {
        width: 50%;
        height: px2rem(34);
        line-height: px2rem(34);
        display: flex;
        justify-content: center;
        align-items: center;
        &:nth-of-type(1) {
          border-right: 1px solid #dedede;
          i {
            display: inline-block;
            @include wh(26,
            32);
            background-image: url("../../assets/image/address.png");
            background-size: contain;
            border: none;
            margin-right: px2rem(5);
          }
        }
        &:nth-of-type(2) {
          i {
            display: inline-block;
            @include wh(34,
            34);
            background-image: url("../../assets/image/tel.png");
            background-size: contain;
            border: none;
            margin-right: px2rem(5);
          }
        }
      }
    }
  }
  .serciveList {
    background-color: #fff;
    .serciveTitle {
      height: px2rem(120);
      padding: 0 px2rem(30);
      display: flex;
      justify-content: space-between;
      align-items: center;
      span:nth-of-type(2) {
        @include sc(24,
        #999);
      }
    }
    .product {
      padding: 0 px2rem(20);
      display: flex;
      flex-flow: row wrap;
      box-sizing: border-box;
      > div {
        width: 50%;
        height: px2rem(365);
        padding: 0 px2rem(10);
        box-sizing: border-box;
        > div {
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: px2rem(240);
            vertical-align: middle;
          }
          p {
            text-align: left;
            padding-left: px2rem(15);
            &:nth-of-type(1) {
              @include sc(28,
              #333);
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              line-height: px2rem(28);
              padding-top: px2rem(16);
            }
            &:nth-of-type(2) {
              line-height: px2rem(32);
              padding-top: px2rem(24);
              span:nth-of-type(1) {
                @include sc(32,
                #333);
              }
              s {
                padding-left: px2rem(10);
                @include sc(24,
                #999);
              }
            }
          }
        }
      }
    }
  }
  .brand {
    background-color: #fff;
    padding: 0 px2rem(30);
    h4 {
      font-weight: normal;
    }
    .tit {
      padding: px2rem(47) 0;
      @include sc(28,
      #333);
      text-align: left;
    }
    .article {
      img {
        height: px2rem(328);
        vertical-align: middle;
      }
      h3 {
        padding: px2rem(35) 0;
        @include sc(36,
        #08bae3);
        text-align: left;
        font-weight: 500;
        span {
          position: relative;
          i {
            position: absolute;
            width: 100%;
            height: 1rem;
            background-color: rgba(125, 125, 125, 0.05);
            left: 0;
            top: 0.5rem;
          }
        }
      }
      .line {
        @include wh(40,
        3);
        background-color: #08bae3;
        margin: px2rem(20) 0;
      }
      p {
        @include sc(28,
        #333);
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.7;
        letter-spacing: normal;
        text-align: justify;
        margin-bottom: px2rem(100);
      }
    }
  }
}
</style>
